<template>
	<Layout :class="'bg-white p-2'">
		<Row :class="'m-1'">
			<Col span="2">
			<Button class="m-2" type="error" @click="newHouseLease()">新增</Button>
			</Col>
			<Col span="4">
			<Input :class="'w-45 m-2'" v-model="searchDes" placeholder="请输入描述" />
			</Col>
			<Col span="2">
			<Button class="m-2" type="primary" shape="circle" @click="search(1)" icon="ios-search">查询</Button>
			</Col>
		</Row>
		<Row :class="'m-1'">
			<el-select  v-model="houseLeaseId" clearable placeholder="请选择价格" size="small" style="width: 150px;margin-right: 20px;"
			 @change="search(1)">
			    <el-option
			      v-for="item in prices"
			      :key="item.houseLeaseId"
			      :label="item.priceIntervel"
			      :value="item.houseLeaseId">
			    </el-option>
			</el-select>
			<el-select  v-model="houseAreaId" clearable placeholder="请选择面积" size="small" style="width: 150px;margin-right: 20px;"
			 @change="search(1)">
			    <el-option
			      v-for="item in areas"
			      :key="item.houseAreaId"
			      :label="item.areaInterval"
			      :value="item.houseAreaId">
			    </el-option>
			</el-select>
		</Row>
		<Layout :class="'bg-white'">
			<Table border :class="'m-1'" :columns="tableInfo.columnInfo" :data="tableInfo.data">
				<template slot-scope="{ row, index }" slot="provienceId">
				  <Row>
				    <Col>
				      <span @click="showpro(row.provienceId)">{{pro[index]}}</span>
				      
				    </Col>
				  </Row>
				</template>
				<template slot-scope="{ row, index }" slot="cityId">
				  <Row>
				    <Col>
				      <span @click="showcit(row.cityId)">{{cit[index]}}</span>
				      
				    </Col>
				  </Row>
				</template>
				<template slot-scope="{ row, index }" slot="reignId">
				  <Row>
				    <Col>
				      <span @click="showreg(row.reignId)">{{reg[index]}}</span>
				      
				    </Col>
				  </Row>
				</template>
				<template slot-scope="{ row, index }" slot="action">
					<Button type="primary" size="small" style="margin-right: 5px" @click="show(row.leaseId)">详细</Button>
					<Button type="error" size="small" @click="remove(row.leaseId)">删除</Button>
				</template>
			</Table>
			<Page :class="'m-2 text-right'" :page-size="tableInfo.pageSize" @on-change="pageSearch"
				:total="tableInfo.total" />
		</Layout>
	</Layout>
</template>
<script>
	export default {
		data() {
			return {
				pro:[],
				cit:[],
				reg:[],
				searchProvience: "",
				searchCity: "",
				searchRegin: "",
				searchDes: "",
				leaseId: 0,
				houseLeaseId: null,
				houseAreaId : null,
				method: "",
				tableInfo: {
					currentPage: 1,
					total: 0,
					columnInfo: [{
							title: "租房编号",
							key: "leaseId",
							
						},
						
						{
							title: "省",
							slot: "provienceId",
							
							
						},
						{
							title: "市",
							slot: "cityId",
							
						},
						{
							title: "区",
							slot: "reignId",
							
						},

						{
							title: "小区",
							key: "xiaoqu",
							
						},
						{
							title: "片区",
							key: "pianqu",
							
						},

						{
							title: "面积",
							key: "area",
						
						},
						{
							title: "价格",
							key: "leasePrice",
							
						},
						// {
						// 	title: "出租方式",
						// 	key: "method",
							
						// },

						{
							title: "操作",
							slot: 'action',
							width: 170
						}
					],					
					data: [],					
				},
				prices : [],
				areas : []
			}
		},
		methods: {
		    	showpro:function(provienceId){
		    		this.http.get({
		    			url: "/sys-region/name",
		    			param: {
		    				srId:provienceId
		    			}
		    		}).then(data => {
		    			console.log(data)
		    			this.$data.pro.push(data)
		    			// console.log(this.pro)
		    		})
		    	},
				showcit:function(cityId){
					this.http.get({
						url: "/sys-region/name",
						param: {
							srId:cityId
						}
					}).then(data => {
						// console.log(data)
						this.$data.cit.push(data)
						// console.log(this.cit)
					})
				},
				showreg:function(reignId){
					this.http.get({
						url: "/sys-region/name",
						param: {
							srId:reignId
						}
					}).then(data => {
						// console.log(data)
						this.$data.reg.push(data)
						// console.log(this.cit)
					})
				},
			init: function() {
				this.search(1);
			},
			newHouseLease: function() {
				this.$router.push({
					name: "houseLease_new"
				});
			},
			show: function(leaseId) {
				this.$router.push({
					name: "houseLease_detail",
					params: {
						leaseId
					}
				});
			},
			showPrice : function(){
				this.http.get({
					url : "/house-lease-price/list",
					}).then(data => {
						this.$data.prices = data;
					});
			},
			showArea : function(){
				this.http.get({
					url : "/house-area/list",
					}).then(data => {
						this.$data.areas = data;
					});
			},
			remove: function(leaseId) {
				this.message.confirm({
					title: "删除提示",
					content: "即将删除用户，确定吗？",
					onOk: () => {
						this.http.delete({
							url: "/house-lease-client-vo/info",
							param: {
								leaseId
							}
						}).then(data => {
							this.search(this.$data.tableInfo.currentPage);
						});
					},
					onCancel: () => {
						this.message.info('操作已取消');
					}
				});
			},
			search: function(currentPage) { 
				this.pro = []
				this.cit = []
				this.reg = []
				let self = this;
				this.http.get({
					url: "/house-lease-client-vo/page",
					param: {
						currentPage: currentPage,
						des: this.$data.searchDes,
						houseLeaseId: this.$data.houseLeaseId,
						houseAreaId: this.$data.houseAreaId,
						clientId: this.$data.clientId
					}
				}).then(data => {
					console.log(data.records)
					for(var i = 0;i<data.records.length;i++){
						
						this.showpro(data.records[i].provienceId)
						this.showcit(data.records[i].cityId)
						this.showreg(data.records[i].reignId)
					}
					this.$data.tableInfo.data = data.records;
					this.$data.tableInfo.total = data.total;
					this.$data.tableInfo.pageSize = data.size;
					for (var i = 0; i < data.records.length; i++) {
						if (true === data.records[i].method) {
							data.records[i].method = "合租"
							self.$data.method = data.records[i].method;
						}
						if (false === data.records[i].method) {
							data.records[i].method = "整租"
							self.$data.method = data.records[i].method;
						}
					}
				});
			},
			pageSearch: function(changedPage) {
				this.$data.tableInfo.currentPage = changedPage;
				this.search(changedPage);
			}
		},
		created: function() {
			this.showPrice();
			this.showArea();
			this.init();
		}
	}
</script>

<style>

</style>
